<template>
  <a-form
    :model="formState"
    name="basic"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-form-item
      label="用户名"
      name="username"
      :rules="[{ required: true, message: '请输入 your 的 username!' }]"
    >
      <a-input v-model:value="formState.username" />
    </a-form-item>

    <a-form-item
      label="密码"
      name="password"
      :rules="[{ required: true, message: '请输入 your 的 password!' }]"
    >
      <a-input-password v-model:value="formState.password" />
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" html-type="submit">登录</a-button>
    </a-form-item>
  </a-form>
</template>
<script lang="ts" setup>
import { Login, Role } from '@/api';
import router from '@/router';
import { reactive } from 'vue';

interface FormState {
  username: string;
  password: string;
}

const formState = reactive<FormState>({
  username: '小小怪',
  password: '0000'
});
const onFinish = async (values: any) => {
  console.log('Success:', values);
  let {data} = await Login({form:formState}) 
  if(data.code === 200){
    alert(data.msg)
    localStorage.setItem('token',JSON.stringify(data.token))
    localStorage.setItem('ID',JSON.stringify(data.id))
    localStorage.setItem('name',JSON.stringify(data.name))
    // let res = await Role({id:data.id})
    // console.log(res.data);
    // localStorage.setItem('rbac',JSON.stringify(res.data))
    // router.push('/')
  }else{
    alert(data.msg)
  }
  
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};
</script>



